import React from "react";
import store from "../../store/wwj/index";

import { SET_SONGER } from "../../store/hm/actionCreater";

class Songer extends React.Component {
    constructor() {
        super();
        this.state = {
            data: {}
        };
    }
    componentDidMount() {
        store.dispatch(SET_SONGER(this.state.data));
    }

    componentWillMount() {
        this.setState({
            data: JSON.parse(localStorage.getItem("SingerId"))
        });
    }
    huiqu() {
        this.props.history.go(-1);
    }
    getsongid(i) {
        let songid1 = store.getState().SongerReducer.hotSongs[i].id;
        let songid = { i: i, id: songid1 };
        localStorage.setItem("songid", JSON.stringify(songid));
    }
    render() {
        let tracks = store.getState().SongerReducer.hotSongs;

        return (
            <div className="bestbox">
                <div className="hmsongertop">
                    <header className="hmheader">
                        <div className="zuobox">
                            <img
                                onClick={this.huiqu.bind(this)}
                                className="zuo"
                                src={require("../../assets/hm/img/zuo.png")}
                                alt=""
                            />
                        </div>
                        <span className="gedan">
                            {store.getState().SongerReducer.artist.name}
                        </span>
                        <h1
                            style={{
                                clear: "both",
                                height: 0,
                                overflow: "hidden"
                            }}
                        >
                            1
                        </h1>
                    </header>
                </div>
                <div className="hmsongerbgimgbox">
                    <img
                        className="hmsongerbgimg"
                        src={store.getState().SongerReducer.artist.picUrl}
                        alt=""
                    />
                </div>
                <div className="hmmohu"></div>
                <div className="bottom">
                    <div className="bofang">
                        <div className="bofangleft">
                            <div className="xiaobofangbox">
                                <img
                                    className="xiaobofang"
                                    src={require("../../assets/hm/img/bofang.png")}
                                    alt=""
                                />
                            </div>
                            <div className="quanbu">
                                <span className="s1">播放全部</span>
                                <span className="s2">
                                    (共
                                    {
                                        store.getState().SongerReducer.hotSongs
                                            .length
                                    }
                                    首)
                                </span>
                            </div>
                            <h1
                                style={{
                                    clear: "both",
                                    height: 0,
                                    overflow: "hidden"
                                }}
                            >
                                1
                            </h1>
                        </div>
                        <div className="hmsongerhongshoucang">
                            <img
                                className="hmsongerhongjia"
                                src={require("../../assets/hm/img/jia.png")}
                                alt=""
                            />
                            &nbsp;
                            <span className="hmsongersc">收藏</span>
                        </div>
                    </div>
                    <ul>
                        {tracks.map((item, index) => {
                            if (item.ar[1] == undefined) {
                                return (
                                    <li
                                        onClick={this.getsongid.bind(
                                            this,
                                            index
                                        )}
                                        className="hmli"
                                        key={index}
                                    >
                                        <div className="index">{index + 1}</div>
                                        <div className="indexright">
                                            <p className="geming">
                                                {item.name}
                                            </p>
                                            <p className="yanchangzhe">
                                                {item.ar[0].name}-{item.al.name}
                                            </p>
                                        </div>
                                    </li>
                                );
                            } else {
                                return (
                                    <li
                                        onClick={this.getsongid.bind(
                                            this,
                                            index
                                        )}
                                        className="hmli"
                                        key={index}
                                    >
                                        <div className="index">{index + 1}</div>
                                        <div className="indexright">
                                            <p className="geming">
                                                {item.name}
                                            </p>
                                            <p className="yanchangzhe">
                                                {item.ar[0].name}/
                                                {item.ar[1].name}-{item.al.name}
                                            </p>
                                        </div>
                                    </li>
                                );
                            }
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}

export default Songer;
